<template>
  <a-modal
    v-model:visible="modalVisible"
    :title="isAudit == 0 ? '查看护理报告' : '审核护理报告'"
    width="80%"
    :footer="null"
    @cancel="cancle"
    class="user-modal"
  >
    <slot>
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-card title="服务信息">
          <block v-if="!directShow">
            <a-descriptions bordered :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }">
              <a-descriptions-item label="服务对象">{{ report.userName }}</a-descriptions-item>
              <a-descriptions-item label="服务项目">{{ report.serviceName }}</a-descriptions-item>
              <a-descriptions-item label="服务地址">{{ report.address }}</a-descriptions-item>
              <a-descriptions-item label="服务护士">{{ report.nurseName }}</a-descriptions-item>
              <a-descriptions-item label="服务时间">{{ nursingRecord.createdAt }}</a-descriptions-item>
            </a-descriptions>
            <a-divider></a-divider>
          </block>
        </a-card>
        <a-card title="情况评估" v-if="![4, 6].includes(report.identity)">
          <block v-if="!directShow">
            <a-descriptions bordered :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }" v-if="arr == null">
              <a-descriptions-item v-for="(item, index) in arr3" :key="index" :label="item.fieldNameText">{{
                nursingRecord[item.englishFieldName]
              }}</a-descriptions-item>
            </a-descriptions>
            <a-descriptions bordered :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }" v-if="arr != null">
              <a-descriptions-item v-for="(item, index) in arr1" :key="index" :label="item.fieldName">{{
                nursingRecord[item.englishFieldName]
              }}</a-descriptions-item>
              <a-descriptions-item v-for="(item, index) in arr2" :key="index" :label="item.fieldName">
                {{ item.options[nursingRecord[item.englishFieldName]].name }}
                {{ nursingRecord[item.englishFieldName + 'Detail'] }}
              </a-descriptions-item>
            </a-descriptions>
          </block>
        </a-card>
        <a-card title="护理视频" v-if="nursingRecord.nursingVideo">
          <video controls :width="180" :src="nursingRecord.nursingVideo">您的浏览器不支持 video 标签。</video>
        </a-card>
        <a-card title="护理图片">
          <a-image v-for="(item, i) in nursingRecord.staPictureUrl" :key="i" :width="100" :src="item" />
        </a-card>
        <a-card title="使用前耗材图片" v-if="nursingRecord.consumablePic && nursingRecord.consumablePic.length > 1">
          <div>
            <a-image v-for="(item, i) in nursingRecord.consumablePic.split(',')" :key="i" :width="100" :src="item" />
          </div>
        </a-card>
        <a-card title="使用后耗材图片" v-if="nursingRecord.consumablePicAfter && nursingRecord.consumablePicAfter.length > 1">
          <div>
            <a-image v-for="(item, i) in nursingRecord.consumablePicAfter.split(',')" :key="i" :width="100" :src="item" />
          </div>
        </a-card>
        <a-card title="耗材丢弃图片" v-if="nursingRecord.consumablePicDiscard && nursingRecord.consumablePicDiscard.length > 1">
          <div>
            <a-image v-for="(item, i) in nursingRecord.consumablePicDiscard.split(',')" :key="i" :width="100" :src="item" />
          </div>
        </a-card>
        <a-card title="录音列表" v-if="report.videoList && report.videoList.length > 1">
          <div v-for="(item, i) in report.videoList" :key="i">
            <a :href="item">{{ `录音${i + 1}` }}</a>
          </div>
        </a-card>
        <a-card title="免责声明" v-if="report.disclaimer">
          <div>
            <a-image :width="100" :src="report.disclaimer" />
          </div>
        </a-card>
        <a-card title="患者主诉" v-if="![6].includes(report.identity)">{{ nursingRecord.principleAction }}</a-card>
        <a-card title="护理内容">{{ nursingRecord.nursingContent }}</a-card>
        <a-card title="健康指导">{{ nursingRecord.healthGuidance }}</a-card>
        <!-- <a-card title="情况评估"></a-card>
        <a-tag color="processing" style="padding: 5px 20px; margin-bottom: 20px"
          >护理图</a-tag
        > -->

        <!-- <a-form-item label="图片">
      
        </a-form-item> -->
        <!-- <a-form-item label="护理后">
          <a-image :width="100" :src="nursingRecord.endPictureUrl" />
        </a-form-item> -->

        <!-- 审核护理报告:未通过 -->
        <a-card title="拒绝原因" v-if="nursingRecord.reasonForRejection">{{ nursingRecord.reasonForRejection }}</a-card>
        <a-card title="审核信息">
          <div>审核人员：{{ report.checkPerson }}</div>
          <div>审核时间：{{ report.checkTime }}</div>
        </a-card>
        <!-- <template v-if="nursingRecord.reasonForRejection">
          <a-form-item label="拒绝原因">{{
            nursingRecord.reasonForRejection
          }}</a-form-item>
        </template> -->
      </a-form>
      <!-- 底部内容 -->
      <a-row v-if="isShowClose">
        <a-col :span="12" :offset="12">
          <a-button type="info" @click="cancle">关闭</a-button>
        </a-col>
      </a-row>
    </slot>

    <!-- 审核护理报告插槽 -->
    <div>
      <slot name="audit"> </slot>
    </div>
  </a-modal>
</template>
<script>
import { onMounted, reactive, ref, toRefs, computed } from 'vue'
import { selectNursingRecordByNumber, selectAdminConfigurationByServiceId } from '@/api/order/index'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    number: {
      default: null
    },
    // report: {
    //   type: Object,
    //   default: () => {},
    // },
    // 是否直接展示护理报告
    directShow: {
      type: Boolean,
      default: false
    },
    // 是否审核护理报告
    isAudit: {
      type: Number,
      default: null
    },
    isShowClose: {
      type: Boolean,
      default: true
    }
  },
  setup(props, { emit, attrs }) {
    console.log('11111')

    // const visible = ref(false)
    const modalVisible = computed({
      get: () => props.visible,
      set: val => {
        emit('update:visible', val)
      }
    })

    console.log(modalVisible, '护理报告')
    // 取消，右上角这个关闭也要调用这个方法
    const cancle = () => {
      emit('closeModal')
    }
    console.log('33333333')
    const report = ref({})
    const nursingRecord = ref('')
    const data = reactive({
      arr: [],
      arr1: [],
      arr2: [],
      arr3: [
        {
          fieldNameText: '体温（摄氏度）',
          englishFieldName: 'animalHeat'
        },
        {
          fieldNameText: '脉搏（次/分钟）',
          englishFieldName: 'sphygmus'
        },
        {
          fieldNameText: '呼吸（次/分钟）',
          englishFieldName: 'breathe'
        },
        {
          fieldNameText: '血压（mmHg）',
          englishFieldName: 'bloodPressure'
        }
      ]
    })
    if (!props.directShow) {
      init()
    } else {
      nursingRecord.value = props.report
    }
    async function init() {
      let res = await selectNursingRecordByNumber(props.number)
      if (res.success) {
        report.value = res.object
        // for (let key in res.object.nursingRecord) {
        //   if (!res.object.nursingRecordt[key]) {
        //     res.object.nursingRecord[key] = "未填写";
        //   }
        // }
        selectAdminConfigurationByServiceId({
          serviceId: res.object.serviceId
        }).then(r => {
          data.arr = r.object
          initData()
        })
        let obj = res.object.nursingRecord
        obj.staPictureUrl = obj.staPictureUrl.split(',')
        nursingRecord.value = res.object.nursingRecord
      }
    }
    async function initData() {
      let arr = data.arr.filter(r => r.isisDele != 1)
      arr.map(m => {
        if (m.fieldBelong != 1) {
          data.arr1.push(m)
        } else {
          m.options = JSON.parse(m.choiceType)
          // m.options = arr1.map(a =>  {
          // 	return {
          // 		text:a.name,
          // 		value:a.value
          // 	}
          // })
          data.arr2.push(m)
        }
        return m
      })
      console.log(data.arr1, 'arr1------')
      console.log(data.arr2, 'arr2------')
    }
    onMounted(() => {})
    return {
      ...toRefs(data),
      modalVisible,
      labelCol: {
        style: {
          width: '100px',
          fontWeight: 'bolder'
        }
      },
      wrapperCol: {
        span: 20,
        offset: 1
      },
      cancle,
      report,
      nursingRecord
    }
  }
}
</script>
<style scoped lang="less">
.ant-form-item {
  margin-bottom: 10px;
}
.videoImage {
  height: 80px;
  width: 80px;
}

.ant-form {
  height: 70vh !important;
  overflow: auto !important;
}
</style>
